<template>
    <div class="wrapper">
<!--        <el-backtop target=".wrapper"></el-backtop>-->
        <div class="article">
            <div class="header">
                <div class="title">{{ article.name }}
                    <el-link style="float: right" type="success" :underline="false" @click="$router.back()">返回列表</el-link>
                </div>
                <div class="info">
                    <span class="article-user"><i class="el-icon-user-solid" style="color: black"></i> {{ article.uploader }}</span>
                    <span class="article-time"><i class="el-icon-alarm-clock" style="color: black"></i> {{ article.time }}</span>
                </div>
            </div>
            <div class="body">
                <mavon-editor
                        style="z-index: 0"
                        class="md"
                        :value="article.content"
                        :subfield="false"
                        :defaultOpen="'preview'"
                        :toolbarsFlag="false"
                        :editable="false"
                        :scrollStyle="true"
                        :ishljs="true"
                />
            </div>
        </div>
        <div class="comment">
            <!-- 评论所在位置  -->
            <div class="tip">评论区 ({{allComments.length}})</div>
            <el-divider></el-divider>
            <div class="user-comments">
                <div v-if="allComments.length !== 0">
                    <!-- TODO 在此加载评论  -->
                    <div v-for="comment in allComments" :key="comment.id">
                        <div style="display: flex; margin-top: 13px; min-height: 90px; border-bottom: 1px dotted #cccccc">
                            <!-- 头像  -->
                            <el-avatar :size="50"
                                       :src="comment.avatar ? comment.avatar : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'">
                            </el-avatar>
                            <div style="flex: 1; margin-left: 20px;">
                                <div style="font-weight: 700; color: #8a8a8a">{{ comment.nickName }}
                                    <span style="float: right; font-weight: 500;; color: #cccccc">
                                        <i style="color: #55b9f3" class="el-icon-alarm-clock"></i> {{ comment.time }}
                                    </span>
                                </div>
                                <div style="margin-top: 5px; line-height: 23px">{{ comment.content }}</div>
                                <div style="margin-top: 10px; margin-bottom: 5px">
                                    <el-link type="success" :underline="false" style="margin-right: 18px" @click="handleReply(comment)">回复</el-link>
                                    <el-link type="danger"
                                             v-show="comment.userId === user.id || user.role === 'USER_ADMIN'"
                                             :underline="false"
                                             @click="deleteSpecificComment(comment.id)">删除</el-link>
                                </div>
                            </div>
                        </div>
                        <div v-if="comment.children.length !== 0" style="margin-left: 40px; border-left: 1px dotted #cccccc;">
                            <div v-for="subComment in comment.children" style="display: flex; margin-left: 5px; margin-top: 13px; min-height: 90px; border-bottom: 1px dotted #cccccc">
                                <!-- 头像  -->
                                <el-avatar :size="50"
                                           :src="subComment.avatar ? subComment.avatar : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'">
                                </el-avatar>
                                <div style="flex: 1; margin-left: 20px;">
                                    <div style="font-weight: 700; color: #8a8a8a">{{ subComment.nickName }} <el-tag size="mini" style="margin: 0 9px">回复了</el-tag> {{ subComment.pnickName }}
                                        <span style="float: right; font-weight: 500;; color: #cccccc">
                                        <i style="color: #55b9f3" class="el-icon-alarm-clock"></i> {{ subComment.time }}
                                    </span>
                                    </div>
                                    <div style="margin-top: 5px; line-height: 23px">{{ subComment.content }}</div>
                                    <div style="margin-top: 10px; margin-bottom: 5px">
                                        <el-link type="success" :underline="false" style="margin-right: 18px" @click="handleSubReply(comment, subComment)">回复</el-link>
                                        <el-link type="danger"
                                                 v-show="subComment.userId === user.id || user.role === 'USER_ADMIN'"
                                                 :underline="false"
                                                 @click="deleteSpecificComment(subComment.id)">删除</el-link>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 无评论默认内容  -->
                <div v-else style="text-align: center; color: #cccccc; margin: 40px 0">这里还没有评论，快来抢沙发吧...</div>
            </div>
            <div class="my-comment">
                <el-input type="textarea" size="small" v-model="commentForm.content" placeholder="留下一条友善的评论吧:)"></el-input>
                <el-button style="margin-top: 10px; margin-bottom: 60px" type="success"
                           size="small"
                           icon="el-icon-edit"
                           @click="sendComment">
                    发表评论
                </el-button>
            </div>
        </div>

        <!-- 回复弹窗所在区域  -->
        <el-dialog title="博文回复" :visible.sync="dialogFormVisible" width="50%" custom-class="edit-dialog" :modal="false">
            <el-form :model="commentForm">
                <el-form-item label="回复内容" label-width="80px">
                    <el-input type="textarea" v-model="replyContent" placeholder="请输入回复内容"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="sendReply">发 送</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "ArticleDetails",
        data () {
            return {
                // 当前用户信息
                user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {},
                // 博文ID
                articleId: this.$route.query.id,
                // 博文的相关信息
                article: {},
                // "我"的评论内容
                commentForm: {},
                // 该博文下的所有评论
                allComments: [],
                // 博文回复
                replyContent: '',
                dialogFormVisible: false
            }
        },
        created () {
            this.getArticle(this.articleId)
            this.getAllComments(this.articleId)
        },
        methods: {
            getArticle (id) {
                this.request.get('/article/' + id).then(res => {
                    this.article = res.data
                })
            },
            getAllComments (id) {
                this.request.get('/comment/' + id).then(res => {
                    this.allComments = res.data
                })
            },
            // 发表评论
            sendComment () {
                if (!this.commentForm.content) {
                    this.$message.warning('请输入你的评论内容!')
                    return
                }
                this.commentForm.articleId = this.articleId
                this.commentForm.userId = this.user.id
                this.request.post('/comment', this.commentForm).then(res => {
                    if (res.code === '200') {
                        this.$message.success('评论发表成功!')
                        this.commentForm = {}
                        this.getAllComments(this.articleId)
                    } else {
                        this.$message.error(res.message)
                    }
                })
            },
            // 评论删除
            deleteSpecificComment (commentId) {
                this.request.delete('/comment/' + commentId).then(res => {
                    if (res.code === '200') {
                        this.$message.success('评论删除成功!')
                        this.getAllComments(this.articleId)
                    } else {
                        this.$message.error(res.message)
                    }
                })
            },
            // 回复评论
            handleReply (comment) {
                this.commentForm = {}
                // 设置回复的祖ID和父级ID
                this.commentForm.originId = comment.id
                this.commentForm.pid = comment.id
                this.replyContent = ''
                this.dialogFormVisible = true
            },
            handleSubReply (comment, subComment) {
                this.commentForm = {}
                // 设置回复的祖ID和父级ID
                this.commentForm.originId = comment.id
                this.commentForm.pid = subComment.id
                this.replyContent = ''
                this.dialogFormVisible = true
            },
            sendReply () {
                this.commentForm.content = this.replyContent
                this.commentForm.articleId = this.articleId
                this.commentForm.userId = this.user.id
                this.request.post('/comment', this.commentForm).then(res => {
                    if (res.code === '200') {
                        this.$message.success('回复发表成功!')
                        this.commentForm = {}
                        this.getAllComments(this.articleId)
                        this.dialogFormVisible = false
                    } else {
                        this.$message.error(res.message)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    div.wrapper {
        width: 100%;
        height: 100vh;
        padding: 20px;
        /*overflow: hidden;*/
    }
    div.title {
        font-family: "Adobe 宋体 Std L",serif;
        font-size: 30px;
        color: darkblue;
        margin: 10px 0;
    }
    div.header {
        width: 100%;
        padding: 5px 0;
        border-bottom: 1px dashed #999999;
    }
    span.article-time {
        display: inline-block;
        margin-left: 20px;
    }
    .article-user,.article-time {
        color: #999999;
    }
    div.body {
        margin: 15px 0;
    }
    div.comment {
        margin-bottom: 30px;
    }
    div.my-comment {
        margin-top: 15px;
    }
    div.tip {
        font-size: 25px;
    }
    /deep/ div.el-dialog__body {
        padding-bottom: 10px !important;
    }
    /deep/ .table-header {
        background-color: #E4E4E4 !important;
    }
    /deep/ .edit-dialog {
        border-radius: 12px !important;
    }
</style>